import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import style from './style.less';
import {
    usePlayerStoreDispatch,
    // 一个action
    setMusicId
} from '@/components/Player/store'

const SongItem = ()=>{

    const {keywords} = useParams();
    const [data, setData] = useState(null);
    const requestType = 1;
    const dispatch = usePlayerStoreDispatch()

    useEffect(async ()=>{
        const res = await React.$axios.get(`/search/?keywords=${keywords}&type=${requestType}`);
        console.log(res.data.result);
        const data = res.data.result.songs;
        setData([...data]);
    },[keywords])

    const handleDoubleClick = (e)=>{
        // console.log(e.target.parentNode.id)
        let musicId = e.target.parentNode.id;
        dispatch(setMusicId(musicId))
    }

    return (
        <ul className={style.songItem}>
            {
                data && data.map((item,index)=>(
                    <li key={index} onDoubleClick={handleDoubleClick} id={item.id}>
                        <p>{item.name}</p>
                        <p>{item.artists[0].name}</p>
                        <p>{item.album.name}</p>
                        <p>{(item.duration/60000).toFixed(2).replace('.',':')}</p>
                    </li>
                ))
            }
        </ul>
    )
}

export default SongItem;